<template>
	<!-- 整体布局 -->
	<view class="wrap">
		<!-- 设备区域 -->
		<view class="dev-area">

			<!-- 设备卡片 - 温度 -->
			<view class="dev-cart">
				<view>
					<view class="dev-name">温度</view>
					<!-- 温度图标 -->
					<image class="dev-logo" src="../../static/temp.png" mode=""></image>
				</view>
				<!-- 温度数据显示 -->
				<view class="dev-data">{{temp}} ℃</view>
			</view>

			<!-- 设备卡片 - 湿度 -->
			<view class="dev-cart">
				<view>
					<view class="dev-name">湿度</view>
					<!-- 湿度图标 -->
					<image class="dev-logo" src="../../static/humi.png" mode=""></image>
				</view>
				<!-- 湿度数据显示 -->
				<view class="dev-data">{{humi}} %</view>
			</view>
			
			<!-- 设备卡片 - 烟雾 -->
			<view class="dev-cart">
				<view>
					<view class="dev-name">烟雾</view>
					<!-- 湿度图标 -->
					<image class="dev-logo" src="../../static/smog.png" mode=""></image>
				</view>
				<!-- 湿度数据显示 -->
				<view class="dev-data">{{smog}}</view>
			</view>

			<!-- 设备卡片 - 风扇 -->
			<view class="dev-cart">
				<view>
					<view class="dev-name">风扇</view>
					<!-- 风扇图标 -->
					<image class="dev-logo" src="../../static/fan.png" mode=""></image>
				</view>
				<!-- 风扇开关 -->
				<switch :checked="fan" @change="onFanSwitch" color="#2b9939" />
			</view>
			
			<!-- 额外服务卡片 -->
			<view v-if="beep==true" class="dev-cart" style="background-color: red;">
				危险
			</view>
			<view v-else class="dev-cart" style="background-color:green;">
				安全
			</view>
			
			<!-- 额外服务卡片 -->
			<view class="dev-cart">
				<view>
					答疑：yizhibanjieup
				</view>
			</view>

			<!-- 烟雾阈值长卡片 -->
			<view class="device-cart-l">
				<view>
					<view class="dev-name">烟雾阈值</view>
				</view>
				<view class="ctrl-slider">
					<!-- 滑动条调用slider组件，实时更新阈值 -->
					<slider :value="smog_th" @change="sliderChange($event, 'slider1')" min="0" max="5" step="0.1"
						block-size="20" show-value />
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	// 引入字符串处理函数
	import {
		stringify
	} from 'querystring';
	// 引入创建通用令牌函数
	const {
		createCommonToken
	} = require('@/key.js')
	
	// 产品ID和设备名称要替换成自己的
	const product_id = '';
	const device_name = '';
	
	// Vue组件导出
	export default {
		// 数据部分
		data() {
			return {
				// 温度、湿度、台灯状态
				temp: '',
				humi: '',
				smog: '',
				fan: false,
				beep: false,
				// 接口请求token
				token: '',
				// 烟雾的阈值，初始化为0.3
				smog_th: 0.3,
				switch_flag: 0, //标记开关操作
			}
		},

		// 页面加载时执行的钩子函数
		onLoad() {
			// 初始化token
			const params = {
				// 用户密钥和用户ID改成自己的，版本不用改
				author_key: '',  //用户级秘钥
				version: '2022-05-01',
				user_id: '',  //用户ID
			}
			this.token = createCommonToken(params);
		},

		// 页面显示时执行的钩子函数
		onShow() {
			// 首次获取设备数据
			this.fetchDevData();
			// 定时（每3秒）获取设备数据
			setInterval(() => {
				this.fetchDevData();
			}, 3000)
		},

		// 方法部分
		methods: {
			// 获取设备数据的方法
			fetchDevData() {
				// 发送请求获取设备属性
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', // 仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: product_id,
						device_name: device_name
					},
					header: {
						'authorization': this.token // 自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						console.log('----->'+res.data.data[0].time);
				
						// 更新温度、湿度、台灯状态
						this.temp = res.data.data[5].value;
						this.humi = res.data.data[2].value;
						this.smog = res.data.data[3].value;
						this.beep = res.data.data[0].value === 'true';
		
						if(this.switch_flag==1) this.switch_flag=0;
						else this.fan = res.data.data[1].value === 'true';
						
					}
				});
			},

			// 风扇开关切换的方法
			onFanSwitch(event) {
				console.log(event.detail.value);
				
				this.switch_flag = 1; //标记开关操作了
				
				let value = event.detail.value;
				// 发送请求更新设备属性
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', // 仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						product_id: product_id,
						device_name: device_name,
						params: {
							"fan": value
						}
					},
					header: {
						'authorization': this.token // 自定义请求头信息
					},
					success: () => {
						console.log('FAN ' + (value ? 'ON' : 'OFF') + ' !');
					}
				});
			},

			// 滑动条变化事件的方法
			sliderChange(e, id) {
				console.log('value 发生变化：' + e.detail.value) // 控制台打印信息，调试用
				let key_th = {}
				this.smog_th = e.detail.value
				// 更新温度阈值
				this.key_th = {
					smog_th: this.smog_th,
				}
				// 向后端发送设备属性更新请求
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', // 仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						product_id: product_id,
						device_name: device_name,
						params: this.key_th
					},
					header: {
						'authorization': this.token // 自定义请求头信息
					},
					// 请求成功，打印提示信息，主要用于调试，可自定义
					success: () => {
						console.log(this.key_th);
					}
				});
			}
		}
	}
</script>


<style>
	/* 整体页面容器样式 */
	.wrap {
		padding: 30rpx;
		/* 设置内边距为30像素 */
	}

	/* 设备区域样式 */
	.dev-area {
		display: flex;
		/* 使用弹性盒子布局 */
		justify-content: space-between;
		/* 在弹性容器中均匀分布子元素，两端对齐 */
		flex-wrap: wrap;
		/* 如果子元素溢出容器，则折叠到下一行 */
	}

	/* 设备卡片样式 */
	.dev-cart {
		height: 150rpx;
		/* 设置高度为150像素 */
		width: 320rpx;
		/* 设置宽度为320像素 */
		border-radius: 30rpx;
		/* 设置边框圆角为30像素 */
		margin-top: 30rpx;
		/* 设置上外边距为30像素 */
		display: flex;
		/* 使用弹性盒子布局 */
		justify-content: space-around;
		/* 在弹性容器中均匀分布子元素，两端对齐 */
		align-items: center;
		/* 在弹性容器中垂直居中对齐子元素 */
		box-shadow: 0 0 15rpx #ccc;
		/* 设置盒子阴影，颜色为灰色 */
	}

	/* 长设备卡片样式 */
	.device-cart-l {
		height: 150rpx;
		/* 设置高度为150像素 */
		width: 700rpx;
		/* 设置宽度为700像素 */
		border-radius: 30rpx;
		/* 设置边框圆角为30像素 */
		margin-top: 30rpx;
		/* 设置上外边距为30像素 */
		display: flex;
		/* 使用弹性盒子布局 */
		justify-content: space-around;
		/* 在弹性容器中均匀分布子元素，两端对齐 */
		align-items: center;
		/* 在弹性容器中垂直居中对齐子元素 */
		box-shadow: 0 0 15rpx #ccc;
		/* 设置盒子阴影，颜色为灰色 */
	}

	/* 设备名称样式 */
	.dev-name {
		font-size: 20rpx;
		/* 设置字体大小为20像素 */
		text-align: center;
		/* 文本居中对齐 */
		color: #6d6d6d;
		/* 字体颜色为灰色 */
	}

	/* 设备图标样式 */
	.dev-logo {
		width: 70rpx;
		/* 设置宽度为70像素 */
		height: 70rpx;
		/* 设置高度为70像素 */
		margin-top: 10rpx;
		/* 设置上外边距为10像素 */
	}

	/* 设备数据样式 */
	.dev-data {
		font-size: 50rpx;
		/* 设置字体大小为50像素 */
		color: #6d6d6d;
		/* 字体颜色为灰色 */
	}

	/* 滑动条样式 */
	.ctrl-slider {
		width: 580rpx;
		/* 设置宽度为580像素 */
	}
</style>